        /* 在CSS文件中引入字体 */
/*@font-face {
    font-family: 'cusong';
    src: url('/fonts/cusong.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'junransong';
    src: url('/fonts/junransong.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'anton';
    src: url('/fonts/anton.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}*/
@font-face {
    font-family: 'abril';
    src: url('/fonts_old/abril.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* 调整.container或.container-fluid的最大宽度 */
@media (min-width: 1200px) {
    .container, .container-fluid {
        max-width: 90%; /* 或者其他更大的固定值，如'1400px' */
    }
}
    @media (max-width: 768px) {
    .navbar-nav .nav-link {
        font-size: 12px; /* 小屏幕上使用更小的字体尺寸 */
    }
    .navbar-nav .nav-item {
        margin-right: 3px; /* 小屏幕上减少间距 */
    }
}


        /* 设置背景颜色和字体 */
        body {
            background-color: var(--ios-secondary-background);
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

        /* 设置导航栏样式（仅用于仍使用旧导航的页面，避免与新导航冲突） */
        .navbar.legacy-navbar {
            background-color: #002D69;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                padding-left: 40px; /* 增加左侧内边距 */
    padding-right: 40px; /* 增加右侧内边距 */
        }
        .navbar-brand {
            color: white;
            font-weight: bold;
            font-size: 36px;
            letter-spacing: 2px;
            
        }
        .navbar-brand img {
            margin: 0; /* 移除外边距 */
            padding: 0; /* 移除内边距 */
            /*display: block; /* 防止图片下方出现空白 */
        }

        .navbar-nav .nav-link {
            color: white;
        }
        /* 设置主页标题样式 */
        .jumbotron {
            background-color: rgba(96, 161, 227,1);
            color: white;
            margin-top: 20px;
            padding: 40px;
        }

        /* 设置主页标题按钮样式 */
        .jumbotron button {
            background-color: #ffbe16;
            border: none;
            color: var(--text-color-light, black);
            font-weight: bold;
            padding: 10px 20px;
        }
     

        /* 设置主页标题按钮鼠标悬停样式 */
        .jumbotron button:hover {
            background-color: var(--card-bg-light, white);
            color: var(--text-color-light, black);
        }

        /* 设置内容区域样式 */
        .container {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        /* 设置内容标题样式 */
        .container h2 {
            color: #333;
            font-weight: bold;
            margin-bottom: 20px;
        }

        /* 设置内容段落样式 */
        .container p {
            color: var(--text-color-light, #000);
            font-size: 18px;
            line-height: 1.5;
            margin-bottom: 20px;
        }

        /* 设置内容图标样式 */
        .container i {
            color: #333;
            font-size: 40px;
            margin-right: 20px;
        }

        /* 设置内容卡片样式 */
        .card {
            border: none;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            margin-bottom: 20px;
        }

        /* 设置内容卡片图片样式 */
        .card-img-top {
            height: 200px;
            object-fit: cover;
            width: 100%;
        }

        /* 设置内容卡片标题样式 */
        .card-title {
            color: #333;
            font-weight: bold;
            margin-bottom: 10px;
        }

        /* 设置内容卡片文本样式 */


        /* 设置内容卡片按钮样式 */
        .card button {
            background-color: #ffbe16;
            border: none;
            color: var(--text-color-light, black);
            font-weight: bold;
            padding: 10px 20px;
        }

        /* 设置内容卡片按钮鼠标悬停样式 */
        .card button:hover {
            background-color: var(--card-bg-light, white);
            color: var(--text-color-light, black);
        }

        /* 设置页脚链接样式 */
        .footer a {
            color: white;
            font-weight: bold;
            margin-right: 20px;
        }

        /* 设置页脚链接鼠标悬停样式 */
        .footer a:hover {
            color: yellow;
        }

        /* 设置页脚图标样式 */
        .footer i {
            color: white;
            font-size: 20px;
            margin-right: 10px;
        }

        /* 设置页脚图标鼠标悬停样式 */
        .footer i:hover {
            color: yellow;
        }

/* 可选：如果您的轮播图容器不是直接放在<body>下，确保其父容器宽度为100% */
.carousel {
    width: 100%;
}
        /* 设置轮播图的样式 */
        .carousel-item {
            height: 500px;
        }

        .carousel-item img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        .carousel-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
        /* 设置内容区域的样式 */
        .container {
            margin-top: 20px;
        }
        .card {
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            height:auto;
            width:auto;
        }
        .card-img-top {
            height: 200px;
            object-fit: cover;
        }
        .card-body {
            padding: 15px;
            height:auto;
            width:auto;
        }
        .card-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .card-text {
            font-size: 14px;
            color: #666;
            height: auto;
            overflow: hidden;
            text-overflow: ellipsis;
        }
                .card-text-row {
  padding: 0.5rem;
  margin: 0;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eceeef;
}
.card-text-row:last-child {
  border-bottom: 0;
}
        /* 设置页脚的样式 */
        .footer {
            background-color: #f8f9fa;
            padding: 15px;
            text-align: center;
            color: #666;
            margin-top: 20px;
        }
        /* 设置登录模态框的样式 */
        .modal-header {
            border-bottom: none;
        }
        .modal-body {
            padding: 25px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-control {
            border-radius: 20px;
        }
        .btn-login {
            border-radius: 20px;
            background-color: #002D69;
            color: white;
        }
        .btn-login:hover {
            background-color: #0069d9;
        }
        /* 自定义btn-secondary的可用状态样式 */
.btn-secondary {
    background-color: #002D69; /* 默认的Bootstrap灰色，您可以根据需要更改 */
    border-color: #6c757d;
    color: #ffffff; /* 白色文字 */
    transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

/* 自定义btn-secondary的鼠标悬停状态样式 */
.btn-secondary:hover {
    background-color: #007bff; /* 悬停时的背景颜色，稍微暗一点 */
    border-color: #545b62;
    color: #ffffff; /* 保持文字颜色不变 */
}

/* 自定义btn-secondary的不可用状态样式 */
.btn-secondary:disabled {
    background-color: #adb5bd; /* 更浅的灰色背景 */
    border-color: #adb5bd;
    color: #6c757d; /* 暗灰色文字 */
}

        .modal-footer {
            border-top: none;
            justify-content: center;
        }
        .modal-footer a {
            color: #002D69;
        }
        /* 添加自定义样式以突出显示前三名 */
.rank-1 {
  background-color: #ffd700; /* 金色 */
}
.rank-2 {
  background-color: #c0c0c0; /* 银色 */
}
.rank-3 {
  background-color: #cd7f32; /* 铜色 */
}
.current-user {
    background-color: #ffff99; /* 浅黄色背景 */
}
        /* 设置内容区域的样式 */
        .container {
            margin-top: auto;
        }
        .card {
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .card-img-top {
            height: 200px;
            object-fit: cover;
        }
        .card-body {
            padding: 15px;
        }
        .card-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }


        .mr-right {
    margin-right: 40px; /* 或者根据您的需要调整这个值 */
}
#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 1000;
}

.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
    .exchangeable {
        color: green;
        font-weight: bold;
    }
    .non-exchangeable {
        color: grey;
    }
        #carbonForm {
            margin: 20px;
        }

        #carbonForm select,
        #carbonForm input[type="number"] {
            margin: 10px 0;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box; /* 添加box-sizing */
        }

        #carbonForm input[type="submit"] {
            padding: 10px 20px;
            background-color: #002D69; /* 使用主页按钮颜色 */
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%; /* 宽度调整为100% */
        }

        #carbonForm input[type="submit"]:hover {
            background-color: #0069d9; /* 鼠标悬停颜色 */
        }
        .img-fluid {
          height: auto;
          display: block;
          margin-bottom: 10px; /* Add space below the image */
        }
.chat-window {
    border: 1px solid #ccc;
    padding: 10px;
    height: 300px;
    overflow-y: scroll;
    margin-top: 20px;
}

.chat-message {
    margin-bottom: 10px;
    padding: 5px;
    background-color: #f1f1f1;
    border-radius: 5px;
}

.chat-message-header, .chat-message-footer {
    font-size: 0.8em;
    color: #666;
}

.send-time {
    margin-right: 10px;
}

.read-status {
    font-weight: bold;
    color: #2a9d8f; /* Change as per your color scheme */
}
.message {
    padding: 10px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
}

.read {
    background-color: #f0f0f0;
}

.unread {
    background-color: #fff;
    font-weight: bold;
}

.read-mark {
    color: green;
    font-size: 0.8em;
}

.unread-mark {
    color: red;
    font-size: 0.8em;
}
/* 消息列表边框样式，底色改为灰色 */
#messageList {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    background-color: #f0f0f0; /* 灰色背景 */
}
.conversation-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px; /* 圆角边框 */
    background: linear-gradient(to right, #f7f7f7, #ffffff); /* 渐变背景 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 动画效果 */
}

.conversation-item:hover {
    transform: scale(1.03); /* 鼠标悬停时放大 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 鼠标悬停时增加阴影 */
}

/* 消息气泡样式，增加上下距离 */
.message-bubble {
    padding: 10px;
    margin-bottom: 30px; /* 增加上下间距 */
    border-radius: 20px;
    border: 1px solid #eee;
    position: relative;
    opacity: 0; /* 初始透明度为0 */
    transform: translateY(20px); /* 初始向下偏移 */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* 平滑过渡效果 */
}

/* 发送者消息气泡样式 */
.message-bubble.sent {
    background-color: #dcf8c6;
    margin-left: 20%;
}

/* 接收者消息气泡样式 */
.message-bubble.received {
    background-color: #fff;
    margin-right: 20%;
}

/* 已读状态样式，用圆角矩形包裹 */
.read-status {
    position: absolute;
    right: 10px;
    bottom: -25px; /* 调整位置，确保不会与气泡重叠 */
    font-size: 12px;
    padding: 2px 5px; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    background-color: rgba(255, 255, 255, 0.5); /* 透明底色 */
    transition: color 0.3s ease; /* 颜色变化的平滑过渡效果 */
}

/* 已读消息样式 */
.read-status.read {
    color: #4caf50;
}

/* 未读消息样式 */
.read-status.unread {
    color: #f44336;
}
.message-list-separator {
    height: 1px;
    background-color: #ccc; /* 分隔线颜色 */
    margin: 20px 0; /* 分隔线上下的间距 */
}


.nav-item {
    position: relative; /* 确保父容器使用相对定位 */
}

.badge-container {
    position: absolute; /* 使用绝对定位 */
    top: -5px; /* 微调位置 */
    right: 0; /* 微调位置 */
    transform: translate(100%, 0); /* 将角标移动到链接外部的右上角 */
}

.badge {
    display: none; /* 默认不显示，有未读消息时通过JavaScript显示 */
}

/* ----- Message Modal Bubble Styles ----- */
.message-list {
    max-height: 450px; /* Adjust as needed */
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.message-bubble {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 18px;
    margin-bottom: 10px;
    word-wrap: break-word;
    line-height: 1.45;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Sender Bubble (Light Mode) */
.message-bubble.sender {
    background-color: var(--ios-blue, #007AFF);
    color: white;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
    margin-left: auto;
}

/* Receiver Bubble (Light Mode) */
.message-bubble.receiver {
    background-color: var(--ios-gray6, #F2F2F7);
    color: var(--text-color-light, #000);
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    margin-right: auto;
}

/* Message Content */
.message-content {
    margin: 0;
    font-size: 0.95rem;
}

/* Message Timestamp */
.message-time {
    font-size: 0.75rem;
    margin-top: 6px;
    display: block;
    opacity: 0.7;
}

.message-bubble.sender .message-time {
    color: rgba(255, 255, 255, 0.8);
    text-align: right;
}

.message-bubble.receiver .message-time {
    color: var(--muted-text-light, #8E8E93);
    text-align: left;
}

/* ----- Dark Mode Message Bubble Styles ----- */
body.dark-theme .message-bubble.sender,
body.auto-theme.dark-mode .message-bubble.sender {
    background-color: var(--ios-blue-dark, #0A84FF); /* Use dark mode blue */
}

body.dark-theme .message-bubble.receiver,
body.auto-theme.dark-mode .message-bubble.receiver {
    background-color: var(--ios-tertiary-system-background-dark, #2C2C2E);
    color: var(--text-color-dark, #fff);
}

body.dark-theme .message-bubble.sender .message-time,
body.auto-theme.dark-mode .message-bubble.sender .message-time {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-theme .message-bubble.receiver .message-time,
body.auto-theme.dark-mode .message-bubble.receiver .message-time {
    color: var(--muted-text-dark, #8E8E93);
}

/* Conversation List Item Styles */
.conversation-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--ios-separator, #E5E5EA);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.conversation-item:hover {
    background-color: var(--ios-gray6, #F2F2F7);
}

.conversation-item.active {
    background-color: rgba(0, 122, 255, 0.1); /* Light blue highlight */
}

.conversation-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover; /* Ensure image covers the circle */
    background-color: var(--ios-gray5); /* Placeholder bg */
}

.conversation-info {
    flex-grow: 1;
    overflow: hidden;
}

.conversation-name {
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--text-color-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-last-message {
    font-size: 0.85rem;
    color: var(--muted-text-light, #8E8E93);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-time {
    font-size: 0.75rem;
    color: var(--muted-text-light, #8E8E93);
    margin-left: 10px;
    white-space: nowrap;
    align-self: flex-start; /* Align time to the top */
    padding-top: 2px;
}

.unread-indicator {
    width: 10px;
    height: 10px;
    background-color: var(--ios-blue);
    border-radius: 50%;
    margin-left: auto;
    align-self: center;
}

/* Dark Mode Conversation List */
body.dark-theme .conversation-item,
body.auto-theme.dark-mode .conversation-item {
    border-bottom-color: var(--ios-separator-dark, #38383A);
}

body.dark-theme .conversation-item:hover,
body.auto-theme.dark-mode .conversation-item:hover {
    background-color: var(--ios-tertiary-system-background-dark, #1C1C1E);
}

body.dark-theme .conversation-item.active,
body.auto-theme.dark-mode .conversation-item.active {
    background-color: rgba(10, 132, 255, 0.15); /* Darker blue highlight */
}

body.dark-theme .conversation-avatar,
body.auto-theme.dark-mode .conversation-avatar {
    background-color: var(--ios-gray-dark); /* Darker placeholder */
}

body.dark-theme .conversation-name,
body.auto-theme.dark-mode .conversation-name {
    color: var(--text-color-dark, #fff);
}

body.dark-theme .conversation-last-message,
body.auto-theme.dark-mode .conversation-last-message,
body.dark-theme .conversation-time,
body.auto-theme.dark-mode .conversation-time {
    color: var(--muted-text-dark, #8E8E93);
}

body.dark-theme .unread-indicator,
body.auto-theme.dark-mode .unread-indicator {
    background-color: var(--ios-blue-dark, #0A84FF);
}

/* Style for the 'No Conversation Selected' placeholder */
#noConversationSelected {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--muted-text-light, #8E8E93);
    font-size: 1.1rem;
}

body.dark-theme #noConversationSelected,
body.auto-theme.dark-mode #noConversationSelected {
     color: var(--muted-text-dark, #8E8E93);
}

/* Style for message input area */
.message-input-area {
    border-top: 1px solid var(--ios-separator, #E5E5EA);
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

body.dark-theme .message-input-area,
body.auto-theme.dark-mode .message-input-area {
    border-top-color: var(--ios-separator-dark, #38383A);
}

#messageInput {
    flex-grow: 1;
    border-radius: 18px;
    padding: 8px 15px;
    border: 1px solid var(--ios-gray5, #E5E5EA);
    background-color: var(--ios-gray6, #F2F2F7);
    margin-right: 10px;
    resize: none; /* Prevent manual resize */
    height: 38px; /* Initial height */
    line-height: 1.4;
    max-height: 100px; /* Limit max height */
}

body.dark-theme #messageInput,
body.auto-theme.dark-mode #messageInput {
    border-color: var(--ios-gray-dark);
    background-color: var(--ios-tertiary-system-background-dark, #2C2C2E);
    color: var(--text-color-dark);
}

body.dark-theme #messageInput::placeholder,
body.auto-theme.dark-mode #messageInput::placeholder {
    color: var(--muted-text-dark);
}

#sendMessageBtn {
    background-color: var(--ios-blue);
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background-color 0.2s ease;
}

#sendMessageBtn:hover {
    background-color: #0056b3;
}

#sendMessageBtn:disabled {
    background-color: var(--ios-gray5);
    cursor: not-allowed;
}

body.dark-theme #sendMessageBtn {
    background-color: var(--ios-blue-dark);
}

body.dark-theme #sendMessageBtn:hover {
    background-color: #0056b3; /* Adjust dark hover if needed */
}

body.dark-theme #sendMessageBtn:disabled {
     background-color: var(--ios-gray-dark);
}

/* ----- Dark Mode Overrides for index.css ----- */

body.dark-theme .jumbotron button,
body.auto-theme.dark-mode .jumbotron button {
    color: var(--text-color-dark, white); /* Adjust if needed for contrast on yellow */
}

body.dark-theme .jumbotron button:hover,
body.auto-theme.dark-mode .jumbotron button:hover {
    background-color: var(--card-bg-dark, #2c2c2e);
    color: var(--text-color-dark, white);
}

body.dark-theme .container p,
body.auto-theme.dark-mode .container p {
    color: var(--text-color-dark, white);
}

body.dark-theme .card button,
body.auto-theme.dark-mode .card button {
     color: var(--text-color-dark, white); /* Adjust if needed for contrast on yellow */
}

body.dark-theme .card button:hover,
body.auto-theme.dark-mode .card button:hover {
    background-color: var(--card-bg-dark, #2c2c2e);
    color: var(--text-color-dark, white);
}

/* --- Original Modal and Table styles (if needed) --- */
/* These might be handled by Bootstrap variables or specific HTML styles, */
/* but adding explicit dark mode overrides here just in case */

body.dark-theme .modal-content,
body.auto-theme.dark-mode .modal-content {
    background-color: var(--card-bg-dark, #2c2c2e);
    color: var(--text-color-dark, white);
    border-color: var(--border-color-dark, #38383a);
}

body.dark-theme .modal-header,
body.auto-theme.dark-mode .modal-header,
body.dark-theme .modal-footer,
body.auto-theme.dark-mode .modal-footer {
    border-color: var(--border-color-dark, #38383a);
}

body.dark-theme .close,
body.auto-theme.dark-mode .close {
    color: var(--text-color-dark, white);
    text-shadow: none;
}

body.dark-theme .table thead th,
body.auto-theme.dark-mode .table thead th {
    background-color: var(--card-bg-dark, #2c2c2e);
    color: var(--text-color-dark, white);
    border-color: var(--border-color-dark, #38383a);
}

/* Dark Mode Modal Title Color Fix */
body.dark-theme .modal-title,
body.auto-theme.dark-mode .modal-title {
  color: var(--text-color-dark, #FFFFFF); /* Ensure title text is white in dark mode */
}

/* Also ensure the close button is visible */
body.dark-theme .modal-header .btn-close,
body.auto-theme.dark-mode .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Simple way to make it white */
}
